<template>
  <div class="vehicle-statistics-container">
    <!-- 筛选 -->
    <a-form class="form" layout="inline">
      <a-form-item label="日期范围">
        <a-date-picker v-model="startDay" :allowClear="false" format="YYYY-MM-DD" placeholder="开始日期" />
        <span style="margin: 0 10px;">至</span>
        <a-date-picker v-model="endDay" :allowClear="false" format="YYYY-MM-DD" placeholder="结束日期" />
        <a-button style="margin-left:24px;" type="primary" @click="handleQuery">查询</a-button>
        <a-button style="margin-left:24px;" type="primary" @click="exportToExcel">导出Excel</a-button>
      </a-form-item>
    </a-form>
    <!-- 表格 -->
    <vxe-table border resizable keep-source show-overflow ref="xTable" :data="tableData" :loading="loading">
      <vxe-column width="120" field="vehicle_number" title="车牌号" fixed="left"></vxe-column>
      <vxe-column width="120" field="vehicle_type" title="车辆类型"></vxe-column>
      <vxe-column width="180" field="brand_model" title="品牌型号"></vxe-column>
      <vxe-column width="180" field="registration_date" title="注册日期">
        <template #default="{ row }">
          <span>{{moment(row.registration_date).format('YYYY-MM-DD') }}</span>
        </template>
      </vxe-column>
      <vxe-column width="120" field="power_type" title="动力类型"></vxe-column>
      <vxe-column width="120" field="displacement" title="排气量 (L/T)"></vxe-column>
      <!-- <vxe-column width="120" field="end_km" title="时间段末路码表显示总里程数(公里)"></vxe-column> -->
      <vxe-column width="120" field="mileage" title="时间段行驶里程 (公里)"></vxe-column>
      <vxe-column width="120" field="departure_times" title="时间段出车次数 (次）"></vxe-column>
      <vxe-column width="120" field="passenger_count" title="时间段乘坐人次(不含司机)"></vxe-column>
      <vxe-column width="120" field="fuel_cost" title="燃油费"></vxe-column>
      <vxe-column width="120" field="charge_cost" title="充电费"></vxe-column>
      <vxe-column width="120" field="repair_cost" title="维修保养费"></vxe-column>
      <vxe-column width="120" field="roads_cost" title="过路过桥费"></vxe-column>
      <vxe-column width="120" field="total_cost" title="合计"></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
  import {
    apiVehicleStatisticsDateRange
  } from '@/api/featch';
  import moment from 'moment';
  import XLSX from 'xlsx';
  export default {
    name: 'VehicleStatistics',
    data() {
      return {
        moment,
        startDay: moment().startOf('month'),
        endDay: moment().endOf('month'),
        loading: false,
        tableData: [],
      };
    },
    mounted() {
      this.handleQuery();
    },
    methods: {
      handleQuery() {
        this.loading = true;
        apiVehicleStatisticsDateRange({
            startDay: moment(this.startDay).format('YYYY-MM-DD'),
            endDay: moment(this.endDay).format('YYYY-MM-DD'),
          })
          .then((res) => {
            this.loading = false;
            if (res.code === 200) {
              this.tableData = res.data;
            } else {
              this.$message.error(res.message)
            }
          })
          .catch((err) => {
            this.loading = false;
          });
      },
      exportToExcel() {
        if (this.tableData.length === 0) {
          return;
        }
        const arrCopy = this.deepCopy(this.tableData);
        console.log(arrCopy)
        const arr = []
        arrCopy.map(item => {
          arr.push({
            '车牌号': item.vehicle_number,
            '车辆类型': item.vehicle_type,
            '品牌型号': item.brand_model,
            '注册日期': moment(item.registration_date).format('YYYY-MM-DD'),
            '动力类型': item.power_type,
            '排气量 (L/T)': item.displacement,
            '时间段行驶里程 (公里)': item.mileage,
            '时间段出车次数 (次）': item.departure_times,
            '时间段乘坐人次(不含司机)': item.passenger_count,
            '燃油费': item.fuel_cost,
            '充电费': item.charge_cost,
            '维修保养费': item.repair_cost,
            '过路过桥费': item.roads_cost,
            '合计': item.total_cost,
          })
        })
        const worksheet = XLSX.utils.json_to_sheet(arr);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, '车辆统计数据');
        XLSX.writeFile(workbook, '车辆统计信息.xlsx');
      },
      deepCopy(arr) {
        if (!Array.isArray(arr)) {
          return arr;
        }
        const result = [];
        for (const item of arr) {
          if (typeof item === 'object' && item !== null) {
            result.push(Array.isArray(item) ? deepCopy(item) : {
              ...item
            });
          } else {
            result.push(item);
          }
        }
        return result;
      }
    },
  };
</script>

<style lang="less" scoped>
  .vehicle-statistics-container {
    overflow-y: hidden;

    .form {
      margin-bottom: 0;
    }

    ::-webkit-scrollbar {
      width: 12px;
      height: 12px;
      /*background-color: #ddd;*/
    }

    /*滑块*/
    ::-webkit-scrollbar-thumb {
      background-color: rgba(83, 166, 255, 0.5);
      border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: #777;
    }

    /*滑道*/
    ::-webkit-scrollbar-track {
      /* box-shadow: inset 0 0 6px #333; */
      border-radius: 8px;
    }
  }
</style>